import React, {useEffect, useLayoutEffect, useState} from 'react';
import ScrollableTabView, {ScrollableTabBar} from 'react-native-scrollable-tab-view';
import {ApiClient} from "../../utils";
import {lightNavigationConfigure} from "../../base/navconfig";
import {LoadingView} from "react-native-gzdsx-elements";
import {Colors} from "../../styles";
import {SafeAreaView, Text, TouchableOpacity} from "react-native";
import {useNavigation} from "@react-navigation/native";
import PostList from "./components/PostList";
import StatusBarCtl from "../../utils/StatusBarCtl";

const PostIndex = () => {
    const navigation = useNavigation();

    const [categories, setCategories] = useState([]);
    const [loading, setLoading] = useState(true);

    useLayoutEffect(() => {
        navigation.setOptions({
            ...lightNavigationConfigure(navigation),
            headerTitle: '发现',
            headerLeft: () => null,
        });
        return navigation.addListener('focus', () => {
            StatusBarCtl.setToLightStyle();
        });
    }, [navigation]);

    useEffect(() => {
        fetchData();
    }, []);


    const fetchData = () => {
        ApiClient.get('/categories?taxonomy=post').then(response => {
            //console.log(response);
            setCategories(response.result.items);
        }).finally(() => {
            setLoading(false);
        });
    }

    if (loading) return <LoadingView/>;
    return (
        <SafeAreaView style={{flex: 1, backgroundColor: Colors.primary}}>
            <ScrollableTabView
                renderTabBar={() => (
                    <ScrollableTabBar
                        style={{
                            borderBottomWidth: 0.5,
                            borderBottomColor: '#e0e0e0',
                            backgroundColor: '#fff',
                        }}
                        tabsContainerStyle={{paddingHorizontal: 5}}
                        renderTab={(name, page, isTabActive, onPressHandler, onLayoutHandler) => {
                            let color = isTabActive ? '#f00' : '#333';
                            let fontWeight = isTabActive ? 'bold' : '400';
                            return (
                                <TouchableOpacity
                                    key={`${name}_${page}`}
                                    activeOpacity={1}
                                    onPress={() => onPressHandler(page)}
                                    onLayout={onLayoutHandler}
                                    style={{
                                        alignItems: 'center',
                                        justifyContent: 'center',
                                        marginHorizontal: 8
                                    }}
                                >
                                    <Text style={{
                                        fontSize: 16,
                                        color,
                                        fontWeight
                                    }}>{name}</Text>
                                </TouchableOpacity>
                            )
                        }}
                    />
                )}
                style={{backgroundColor: '#f5f5f5'}}
                tabBarUnderlineStyle={{
                    backgroundColor: '#f00',
                    height: 3
                }}
            >
                {
                    categories.map((cate, index) => (
                        <PostList
                            key={index.toString()}
                            options={{cate: cate.cate_id}}
                            tabLabel={cate.name}
                        />
                    ))
                }
            </ScrollableTabView>
        </SafeAreaView>
    );
}

export default PostIndex;
